/*
  引入 react-redux 这个库的 connect 方法
*/ 
import {connect} from 'react-redux'

import Count from '../../components/Count'

import {increateIncrement,decreateIncrement,increateIncrementAsync} from '../../redux/count_action'

function mapStateToProps(state){
  // react 自动将状态 state 给我们了
  return {
    count:state,
    a:5
  }
}

function mapDispatchToProps(dispatch){
  // react 自动将处理状态 dispatch 给我们了
  return {
    jia:(num)=>{
      dispatch(increateIncrement(num))
    },
    jian:(num)=>{
      dispatch(decreateIncrement(num))
    },
    jiaAsync:(num,time)=>{
      dispatch(increateIncrementAsync(num,time))
    }
  }
}

/*
	前面讲了 容器组件与UI组件是通过 props 交流的  但是容器组件又不是程序员自己写的组件  
		所以这个点 react 团队已经帮我们想好了  在第一次调用的 connect(fun1，fun2)方法的时候可以传递两个参数 并且这两个参数都是函数

  函数1 的返回值是一个对象  这个对象的key value 键值对就是正常 我们写组件标签的键值对
    如 return {a:1,b:2} 等同于 <Count a=1 b=2>
    
    并且因为这个是个高阶函数  react 自动将状态 state 作为第一个参数给我们了
  
  函数2 返回的值是一个对象， 对象的key就是正常的组件传值的key  对象的value是 函数 -- 这个函数是处理状态的函数
    如 returun {a:()=>{console.log('hello world')}} 等同于 <Count a={()=>{console.log('hello world')}}>

    并且因为这个是个高阶函数  react 自动将处理状态 dispatch 作为第一个参数给我们了

*/ 

export default connect(mapStateToProps,mapDispatchToProps)(Count)

/*
  connect()(Count) 从这个表达式中可以知道
    connect() 是一个高阶函数  它的返回值也是一个函数
    再次调用传递一个 UI组件（Count） 
    最终会返回一个 容器组件

  注意 容器组件 并不是像我们自己定义UI组件那样定义 而是使用 react-redux 这个库提供的方法进行创建
*/ 

/*
  容器组件我们简单的理解成  就是  左手连接着redux  右手连接着 UI组件
    其中这里 左手链接着 redux 主要是链接着 redux中最为核心的  store
*/ 